﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>牛仔裤 | 商品图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN"/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="resource/js/loading/utilities.js"></script>
<script type="text/javascript" src="resource/js/loading/bubbling.js"></script>
<script type="text/javascript" src="resource/js/global.js"></script>
<script src="resource/js/ImgTransition/prototype.js" type="text/javascript"></script> 
<script src="resource/js/ImgTransition/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="resource/js/ImgTransition/transition.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="resource/css/global.css" /> 
<link rel="stylesheet" type="text/css" href="resource/css/loading.css" />
<style type="text/css">
body{margin:0px auto;color:#444444;font:12px arial,verdana,geneva,helvetica,sans-serif,"宋体";background:#ffffff;width:700px; outline:none;text-align:left;}
#closewindow{position:absolute; cursor:pointer; width:86px;height:20px; right:2px;}
#proName{font:14px arial "微软雅黑","黑体";padding:3px 0 0 8px;}
#leftCol{float:left;width:172px; margin:6px 0 0 1px;}
#procolor{background:url("resource/images/common/viewImg_color.png") no-repeat; background-position:3px top; padding:32px 0 0 3px; width:168px;}
#smallImg{background:url("resource/images/common/viewImg_big.png") no-repeat; background-position:3px top; padding:32px 0 0 3px; width:168px;}
#leftCol ul{list-style:none;	margin:0;	padding:0; width:172px;}
#procolor li{float:left; height:50px; width:30px;}
#smallImg li{height:120px; width:172px;}
#imgcon{float:left; margin:6px 1px 0px 6px;}
#holder{float:left;width:520px; height:693px;}
.coout{padding:1px; margin:1px 0 0 1px; border:1px solid #31659c; width:18px; height:18px; cursor:pointer;}
.cocur{padding:1px; margin:0px; border:2px solid #31659c; width:18px; height:18px; cursor:pointer; background:#cee7ff;}
.imgout{border:1px solid #31659c; padding:1px; cursor:pointer; margin:1px 0 0 22px; width:75px; height:100px;}
.imgcur{border:2px solid #31659c; padding:1px; cursor:pointer; margin:0 0 0 21px; width:75px; height:100px;}
</style>
</head>
<body>
<div id="yui-cms-loading">
	<div id="yui-cms-float">数据加载中...</div>
</div>
<script src="resource/js/loading/loading.js"></script>
<script type="text/javascript">
//configuring the loading mask
barior.widget.Loading.config({
	effect: true, // default: false 
  opacity: 0.9 // default: 1
/*	autodismissdelay: 0, // default: 0 (none)
	closeOnDOMReady: false,
	closeOnLoad: true
*/
});
</script>
<div id="closewindow"><img src="resource/images/common/closewindow.png" border=0 onclick="Javascript:window.close();" /></div>
<div id="proName">sce商品名称商品名称</div>
<div id="leftCol">
	<div id="procolor">
		<ul>
			<li><img src="resource/images/product/c1.gif" border=0 class="cocur" onmouseover="this.className='cocur';" onmouseout="this.className='coout';" /></li>
			<li><img src="resource/images/product/c2.gif" border=0 class="coout" onmouseover="this.className='cocur';" onmouseout="this.className='coout';" /></li>
			<li><img src="resource/images/product/c1.gif" border=0 class="coout" onmouseover="this.className='cocur';" onmouseout="this.className='coout';" /></li>
		</ul>
	</div>
	<div class="clearfix"></div>
  <div id="smallImg">
	  <ul>
	    <li><a href="resource/images/product/b_1.jpg" rel="transition[slideright]" class="hideAline"><img src="resource/images/product/s_1.jpg" border=0 class="imgcur" onmouseover="this.className='imgcur';" onmouseout="this.className='imgout';" /></a></li>
	    <li><a href="resource/images/product/b_2.jpg" rel="transition[slideright]" class="hideAline"><img src="resource/images/product/s_2.jpg" border=0 class="imgout" onmouseover="this.className='imgcur';" onmouseout="this.className='imgout';" /></a></li>
	    <li><a href="resource/images/product/b_3.jpg" rel="transition[slideright]" class="hideAline"><img src="resource/images/product/s_3.jpg" border=0 class="imgout" onmouseover="this.className='imgcur';" onmouseout="this.className='imgout';" /></a></li>    
	  </ul>
	</div>
</div>

<div id="imgcon">
  <div id="holder"><img src="resource/images/product/b_1.jpg" border=0 /></div>
</div>
<div class="clearfix"></div>
<script type="text/javascript">
  oTransition = new Transition( 'holder', 'resource/images/product/b_1.jpg' );
</script>
</body>
</html>
<!--效果
<li><a href="image1.jpg" rel="transition[switchoff]">image1.jpg</a></li>
<li><a href="image2.jpg" rel="transition[slidedown]">image2.jpg</a></li>
<li><a href="image3.jpg" rel="transition[blinddown]">image3.jpg</a></li>
<li><a href="image4.jpg" rel="transition[slideright]">image4.jpg</a></li>
<li><a href="image5.jpg" rel="transition[appear]">image5.jpg</a></li>
<li><a href="image6.jpg" rel="transition[switch]">image6.jpg</a></li>
<li><a href="image7.jpg" rel="transition[blinddown]">image7.jpg</a></li>
<li><a href="image8.jpg" rel="transition[grow]">image8.jpg</a></li>
<li><a href="image9.jpg" rel="transition[shrink]">image9.jpg</a></li>
-->